<!-- 全部拼单弹窗 -->
<template>
    <view class="popup-child x-f pf" v-if="show" @touch.stop.prevent="">
        <view class="mask"></view>

        <view class="popup">
            <view class="top_image">
                <image :src="group_logo" mode=""></image>
            </view>

            <view class="content pr tc">
                <view class="title">
                    <template v-for="(item, index) in data.memberList" v-if="item.is_main">
                        参与{{ item.nickname }}的拼单
                    </template>
                </view>
                <view class="info tc">
                    仅剩{{data.group_max_member - data.group_number}}个名额,
                    <u-count-down class="time" :timestamp="data.endTime" color="#999999" font-size="22"
                        height="36" separatorSize="22" separatorColor="#999999">
                    </u-count-down>
                    后结束
                </view>
                <view class="avatars" v-if="data.memberList && data.memberList.length !== 0">
                    <view class="item" v-for="(item, index) in data.memberList" :key="index">
                        <image class="avatars_top" :src="king" mode="" v-if="index == 0"></image>
                        <image v-if="item.pic_url.length" :src="item.pic_url"></image>
                        <!-- <view v-if="!item" class="empty_avatar"></view> -->
						<image  v-if="!item.pic_url.length" src="/static/image/circle.png" mode=""></image>
                        <view class="avatars_bottom" v-if="index == 0">拼主</view>
                    </view>
                </view>
                
                <view class="text" v-if="data.text">
                    {{ data.text }}
                </view>
                <view class="buttons">
                    <view class="button" @tap="show = false" v-if="data.btn1">
                        {{ data.btn1 }}
                    </view>
                    <view class="button red" v-if="data.btn2" @tap="sure">
                        {{ data.btn2 }}
                    </view>
                </view>

            </view>


            <view class="close" @tap="show = false">
                <image :src="close_img" mode=""></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "popup",
        props: {
            data: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                show: false, // 弹窗开关
                close_img: this.imgUrl + 'close.png',
                group_logo: this.imgUrl + 'group_logo.png',
                king: this.imgUrl + 'king.png'
            };
        },
        methods: {
            sure() {
                // 传输团ID
                this.$emit('sure');
                // 将团ID 存放至VUEX中
                this.$store.dispatch('goods/get_groupKey', this.data.order_group_no);
                this.show = false;
                // this.$refs.phonePopup._data.showTel = true
            }
        }
    }
</script>

<style scoped lang='scss'>
    .popup-child {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;

        .mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 998;
            background-color: rgba($color: #000000, $alpha: .7);
        }
        .popup {
            width: 100%;
            margin: 0 84rpx;
        }
        .content {
            width: 100%;
            z-index: 999;
            background-color: #FFFFFF;
            border-radius: 24rpx;
            padding: 32rpx 24rpx 32rpx 30rpx;
            overflow: hidden;
        }
        .top_image {
            position: relative;
            box-sizing: border-box;
            top: 48rpx;
            text-align: center;
            left: 20rpx;
            z-index: 1000;
            image {
                width: 130rpx;
                height: 130rpx;
            }
        }

        .info {
            font-size: 24rpx;
            color: #999999;
            padding-top: 8rpx;
        }

        .title {
            padding-top: 32rpx;
            text-align: center;
            font-size: 36rpx;
            font-weight: bold;
            color: #333333;
        }

        .avatars {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding-top: 28rpx;
			.item + .item {
				padding-left: 24rpx;
			}
            .item {
                padding: 0 0 24rpx 0;
                .avatars_top {
                    width: 50rpx;
                    height: 50rpx;
                    position: absolute;
                    top: 150rpx;
                }

                .avatars_bottom {
                    position: absolute;
                    top: 248rpx;
                    font-size: 22rpx;
                    color: #E93323;
                    padding: 4rpx 16rpx;
                    border: 1px solid #E93323;
                    line-height: 1em;
                    border-radius: 18rpx;
                    z-index: 1000;
                    background: #FFFFFF;
                }
            }

            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }

            .empty_avatar {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
                background-color: #DDDDDD;
            }
        }

        .text {
            padding-top: 32rpx;
            font-size: 24rpx;
            color: #666;
            text-align: center;
        }

        .buttons {
            padding-top: 48rpx;
            display: flex;
            justify-content: space-between;
        }

        .button+.button {
            margin-left: 24rpx;
        }

        .button {
            flex: 1;
            border: 1px solid #BBBBBB;
            color: #999999;
            border-radius: 8rpx;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 28rpx;
            text-align: center;
        }

        .red {
            border: unset !important;
            color: #FFFFFF !important;
            border-radius: 34rpx;
            background: linear-gradient(84deg, #ff2d1b 5%, #ff3421 5%, #ff977b 94%);
        }

        .close {
            z-index: 1000;
            position: absolute;
            left: 355rpx;
            align-items: center;
            margin-top: 24rpx;

            image {
                width: 56rpx;
                height: 56rpx;

            }
        }
    }
</style>
